<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <title>添加订单-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../static/css/font.css">
  <link rel="stylesheet" href="../../../static/css/weadmin.css">
  <script src="../../../static/lib/layui/layui.js" charset="utf-8"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  <style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
    }
  </style>
  <script>
    //自动填写订单号
    $("#L_invoice").val(getInvoice())

    //自动获得订单号
    function getInvoice() {
      var date = new Date()
      var random = Math.random()
      return ""+date.getFullYear()+(date.getMonth() + 1)+date.getDate()+date.getHours()
              +date.getMinutes()+date.getSeconds()+Math.floor(random*100)
    }
  </script>
</head>

<body>
  <div class="weadmin-body">
    <form class="layui-form">
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="we-red">*</span>用户ID
        </label>
        <div class="layui-input-inline">
          <input type="number" id="id" name="id" required="" lay-verify="required" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="we-red">*</span>收货人
        </label>
        <div class="layui-input-inline">
          <input type="text" id="username" name="username" disabled required="" lay-verify="required"  autocomplete="off"
            class="layui-input layui-btn-disabled">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="phone" class="layui-form-label">
          <span class="we-red">*</span>手机
        </label>
        <div class="layui-input-inline">
          <input type="text" id="phone" name="phone" disabled required="" lay-verify="required|phone" autocomplete="off"
            class="layui-input layui-btn-disabled">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="we-red">*</span>收货地址
        </label>
        <div class="layui-input-inline">
          <input type="text" id="address" name="address" disabled required="" lay-verify="required" autocomplete="off"
            class="layui-input layui-btn-disabled">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="we-red">*</span>配送物流
        </label>
        <div class="layui-input-inline">
          <select id="shipping" name="shipping" class="valid">
            <option value="顺丰物流">顺丰物流</option>
            <option value="京东物流">京东物流</option>
            <option value="申通物流">申通物流</option>
            <option value="中通物流">中通物流</option>
            <option value="圆通物流">圆通物流</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="we-red">*</span>支付方式
        </label>
        <div class="layui-input-inline">
          <select name="controller">
            <option value="支付宝">支付宝</option>
            <option value="微信">微信</option>
            <option value="货到付款">货到付款</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label for="L_invoice" class="layui-form-label"><span class="we-red">*</span>发票抬头</label>
        <div class="layui-input-inline">
          <input type="text" id="L_invoice" name="invoice" disabled  lay-verify="required" autocomplete="off"
            class="layui-input layui-btn-disabled">
        </div>
        <div class="layui-form-mid layui-word-aux"></div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label for="desc" class="layui-form-label"><span class="we-red">*</span>商品增加
          <a class="layui-btn layui-btn-sm layui-btn-primary" onclick="addTable();"><i class="layui-icon">&#xe608;</i>
            添加</a>
        </label>
        <div class="layui-input-block">
          <table class="layui-table" id="myTable">
            <thead>
              <tr>
                <th>id</th>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
                <th>操作</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label for="desc" class="layui-form-label">描述</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" id="desc" name="desc" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">
        </label>
        <button class="layui-btn add" lay-filter="add" lay-submit="">增加</button>
      </div>
    </form>
  </div>
  <script>
    layui.extend({
      admin: '{/}../../static/js/admin'
    });
    layui.use(['form', 'admin', 'jquery', 'table', 'layer'], function () {
      var form = layui.form,
        admin = layui.admin,
        $ = layui.jquery,
        table = layui.table,
        layer = layui.layer;

      //自定义验证规则
      form.verify({
        nikename: function (value) {
          if (value.length < 5) {
            return '昵称至少得5个字符啊';
          }
        },
        pass: [/(.+){6,12}$/, '密码必须6到12位'],
        repass: function (value) {
          if ($('#L_pass').val() != $('#L_repass').val()) {
            return '两次密码不一致';
          }
        }
      });

      //获取设置的商品的信息
      var products = new Array()
      var sumAll = 0
      $(".add").click(function () {
        $("#myTable").children("tr").each(function () {
          var product = {}
          product.productId = $(this).find(".product-id").val()
          product.productName = $(this).find(".product-name").val()
          product.price = $(this).find(".product-price").val()
          product.qty = $(this).find(".product-qty").val()
          product.sum = $(this).find(".product-sum").val()
          sumAll += parseInt(product.sum);
          products.push(product)
        })
      })

      //监听提交

      form.on('submit(add)', function (data) {
        var f = data.field
        var order_data = {customerId: f.id,name: f.username,phone: f.phone,address: f.address,invoice: f.invoice,
          sendMethod: f.shipping,payMethod: f.controller,description: f.desc,orderSum: sumAll}
        $.post({
          url: "/order/add",
          contentType: "application/json;charset=UTF-8",
          data: JSON.stringify(order_data),
          dataType: "json",
          success: function (data) {
            var length = parent.$("tbody").children("tr").length
            var num = parseInt(parent.$(".fr>span").html())
            $(".fr>span", window.parent.document).html(++num);
            if (length<10) {
              var date = new Date()
              date = dateFormat("YYYY-mm-dd HH:MM:SS", date)
              var add = "<tr data-id='"+data+"' user-id='"+f.id+"'>" +
                      "<td>\n" +
                      "  <div class=\"layui-unselect header layui-form-checkbox\" lay-skin=\"primary\" data-id='" + data + "'>\n" +
                      "    <i class=\"layui-icon layui-icon-ok\"></i>\n" +
                      "  </div>\n" +
                      "</td>\n" +
                      "<td>" + data + "</td>\n" +
                      "<td>" + f.username + "</td>\n" +
                      "<td>" + f.phone + "</td>\n" +
                      "<td>" + f.address + "</td>\n" +
                      "<td>" + sumAll + "</td>\n" +
                      "<td>" + f.controller + "</td>\n" +
                      "<td>" + f.shipping + "</td>\n" +
                      "<td>" + f.invoice + "</td>\n" +
                      "<td>" + date + "</td>\n" +
                      "<td class=\"td-manage\">\n" +
                      "  <a title=\"查看\" onclick=\"WeAdminEdit('编辑','./edit.html', this, 600, 400)\" href=\"javascript:;\">\n" +
                      "    <i class=\"layui-icon layui-icon-edit\"></i>\n" +
                      "  </a>\n" +
                      "  <a title=\"删除\" onclick=\"member_del(this,'要删除的id')\" href=\"javascript:;\">\n" +
                      "    <i class=\"layui-icon layui-icon-delete\"></i>\n" +
                      "  </a>\n" +
                      "</td>\n"
              "</tr>"
              parent.$('#orderList').append(add)
            }
            $.each(products,function (index,item) {
              item.orderId = data
            })
          },
          async: false
        })
        $.post({
          url: "/order/addProducts",
          contentType: "application/json;charset=UTF-8",
          data: JSON.stringify(products)
        })
        //发异步，把数据提交给php
        layer.alert("增加成功", {
          icon: 6
        }, function () {
          // 获得frame索引
          var index = parent.layer.getFrameIndex(window.name);
          //关闭当前frame
          parent.layer.close(index);
        });
        sumAll = 0
        return false;
      });

      var num = 1

      window.addTable = function () {
        var tableHtml = "";
        tableHtml += '<tr id="tr' + num + '">' +
          '<td><div class="layui-input-inline"><input type="text" name="pid" autocomplete="off" lay-verify="required" class="layui-input product-id"></div></td>' +
          '<td><div class="layui-input-inline"><input type="text" name="name" autocomplete="off" lay-verify="required" disabled class="layui-input layui-btn-disabled product-name"></div></td>' +
          '<td><div class="layui-input-inline"><input type="text" name="price" autocomplete="off" lay-verify="required" class="layui-input product-price"></div></td>' +
          '<td><div class="layui-input-inline"><input type="text" name="qty" autocomplete="off" lay-verify="required" class="layui-input product-qty"></div></td>' +
          '<td><div class="layui-input-inline"><input type="text" name="sum" autocomplete="off" lay-verify="required" disabled class="layui-input layui-btn-disabled product-sum"></div></td>' +
          '<td><a style="cursor: pointer; color: blue;" class="delete">删除</a>' +
          '</td>' +
          '</tr>';

        var elements = $("#myTable").children().length; //表示id为“mtTable”的标签下的子标签的个数

        $("#myTable").children().eq(elements - 1).after(tableHtml); //在表头之后添加空白行
        num++;
      }

      //删除行
      $("#myTable").on("click",".delete",function () {
        $(this).parents("tr").remove()
      })

      //自动填写用户相关信息
      $("#id").keyup(function () {
        var id = $(this).val()
        if (id == "") {
          $("#username").val("")
          $("#phone").val("")
          $("#address").val("")
        } else {
          $.get({
            url: "/member/message/"+id,
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
              if (data!="") {
                $("#username").val(data.customerName)
                $("#phone").val(data.customerPhone)
                $("#address").val(data.customerAddress)
                $("#username").removeClass("layui-btn-disabled")
                $("#phone").removeClass("layui-btn-disabled")
                $("#address").removeClass("layui-btn-disabled")
                $("#username").removeAttr("disabled")
                $("#phone").removeAttr("disabled")
                $("#address").removeAttr("disabled")
              } else {
                $("#username").val("")
                $("#phone").val("")
                $("#address").val("")
                $("#username").addClass("layui-btn-disabled")
                $("#phone").addClass("layui-btn-disabled")
                $("#address").addClass("layui-btn-disabled")
                $("#username").attr("disabled",true)
                $("#phone").attr("disabled",true)
                $("#address").attr("disabled",true)
              }
            },
            async: false
          })
        }
      })


      //自动填写商品名称和价格
      $("#myTable").on("keyup",".product-id",function () {
        var productId = $(this).val()
        var tr = $(this).parents("tr")
        if (productId == "") {
          tr.find(".product-name").val("")
          tr.find(".product-price").val("")
        } else {
          $.get({
            url: "/product/message/"+productId,
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
              tr.find(".product-name").val(data.productName)
              tr.find(".product-price").val(data.price)
            },
            async: false
          })
        }
      })

      //自动计算总价
      $("#myTable").on("keyup",".product-qty",function () {
        var tr = $(this).parents("tr")
        var price = tr.find(".product-price").val();
        var qty = $(this).val()
        tr.find(".product-sum").val(price*qty)
      })
      $("#myTable").on("keyup",".product-price",function () {
        var tr = $(this).parents("tr")
        var qty = tr.find(".product-qty").val();
        var price = $(this).val()
        tr.find(".product-sum").val(price*qty)
      })

      //自动填写订单号
      $("#L_invoice").val(getInvoice())

      //自动获得订单号
      function getInvoice() {
        var date = new Date()
        var random = Math.random()
        return ""+date.getFullYear()+(date.getMonth() + 1)+date.getDate()+date.getHours()
                +date.getMinutes()+date.getSeconds()+Math.floor(random*100)
      }

      function dateFormat(fmt, date) {
        let ret;
        const opt = {
          "Y+": date.getFullYear().toString(),        // 年
          "m+": (date.getMonth() + 1).toString(),     // 月
          "d+": date.getDate().toString(),            // 日
          "H+": date.getHours().toString(),           // 时
          "M+": date.getMinutes().toString(),         // 分
          "S+": date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
          ret = new RegExp("(" + k + ")").exec(fmt);
          if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
          };
        };
        return fmt;
      }
    });
  </script>
</body>

</html>